<template>
  <div v-if="addVisible" class="editpanelPop">
    <div :class="{'editpanel':true,'twoStageWindow':true,'isBigCon':isBig}" style="padding-bottom:0;">
      <!-- <div @click="isBigFun" class="iconDiv">
        <img src="../../../../assets/bsImg/left.png" alt="" v-if="!isBig" style="width: 48px;">
        <img src="../../../../assets/bsImg/right.png" alt="" v-if="isBig" style="width: 48px;">
      </div> -->
      <div class="twoStageWindowTitle">
        数据校核 <span style="margin-left:8px;font-size:13px;">{{testEntryData.detectabilityName}}</span>
        <div class="twoStageWindowClose">
          <el-button size="mini" type="primary" @click="checkIsPass" v-if="$parent.userOpernation.check.display && testEntryData.status == 533">校核</el-button>
          <el-button size="mini" v-on:click="close">取消</el-button>
        </div>
      </div>
      <div class="containercontent" style="margin-top: 40px;height:calc(100% - 40px);padding:0 20px;" v-loading="loading1"
        element-loading-text="拼命加载中">
        <div>
          <div style="height:40px;line-height:40px;margin-bottom:10px;">
            <div class="resultControlBar">
              检测单信息
              <el-button size="mini" type="primary" @click="lookequipCheck">仪器使用记录</el-button>

            </div>
          </div>
          <div id="aSinglBatch">
            <el-table :data="testEntryDetail" size="mini" style="width:100%;">
              <el-table-column prop="code" label="检测单号"></el-table-column>
              <el-table-column prop="equipmentName" label="主仪器" show-overflow-tooltip></el-table-column>
              <el-table-column prop="assistEquipmentName" label="辅助仪器" show-overflow-tooltip></el-table-column>
              <el-table-column prop="checkerName" label="校核人员">
              </el-table-column>
              <el-table-column prop="togetherWithName" label="共同完成人"></el-table-column>
              <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top" v-if="opinionList.length != 0">
                    <div v-for="(item,index) in opinionList" :key="index">
                      <p>【{{item.createTime.substring(0,16)}}】 {{item.trackOpinion}}</p>
                    </div>
                    <div slot="reference" class="name-wrapper">
                      <el-tag size="medium">{{ scope.row.statusName }}</el-tag>
                    </div>
                  </el-popover>
                  <div slot="reference" class="name-wrapper" v-if="opinionList.length == 0">
                    <el-tag size="medium">{{ scope.row.statusName }}</el-tag>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="desc" label="备注" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>
        </div>
        <div style="padding:20px 0;height: calc(100% - 120px);">
          <div style="padding-bottom: 10px;height:32px;" id="yangpinceshibar">
            <div class="inlineblock" style="width:70px">检测结果</div>
            <div class="resultControlBar inlineblock" style="width:calc(100% - 80px)">
              <el-button size="mini" type="primary" @click="zhuisuDetail">追溯</el-button>
              <el-button @click="yuanshijiemian=!yuanshijiemian" size="mini" type="primary">切换视图</el-button>
              <el-button size="mini" type="primary" @click="standarLine" v-if="testEntryData.doUseCurve">标准曲线</el-button>
              <el-button size="mini" type="primary" @click="titrationResult" v-if="titrationBtn">标定结果</el-button>
              <el-button size="mini" type="primary" @click="verifyQcData">质控验证</el-button>
            </div>
          </div>
          <div v-if="yuanshijiemian">
            <div class="inlineblock" style="width: calc(35% - 15px);vertical-align:top;" id="sampleTable">
              <el-table :data="testEntryData.sampleBeans" style="width: 100%" size="mini" ref="sampleTable" :height="sampleTableHeight"
                highlight-current-row @row-click="sampleTableCurrentChange">
                <el-table-column width="55px" fixed label="杯号">
                  <template slot-scope="scope">
                    {{scope.$index+1}}
                  </template>
                </el-table-column>
                <el-table-column property="sampleCode" label="样品编号" fixed width="115px" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column property="sampleName" label="样品名称" width="115px" :show-overflow-tooltip="true">
                </el-table-column>

                <el-table-column property="taskName" label="任务名称" min-width="140px" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{scope.row.taskName == null ? "---":scope.row.taskName}}
                  </template>
                </el-table-column>
                <el-table-column property="factDate" label="采样日期" width="115px">
                  <template slot-scope="scope">
                      {{scope.row.factDate == null || scope.row.factDate == "" || scope.row.factDate == undefined? "---":scope.row.factDate.split(" ")[0]}}
                  </template>
                </el-table-column>

                <el-table-column property="qcTypeName" width="120px" label="QC类型" show-overflow-tooltip :formatter="formatterQcType">
                  <!--<template slot-scope="scope">
                                        {{scope.row.doBlind ? '***':scope.row.qcTypeName}}
                                    </template>-->
                </el-table-column>
                <el-table-column property="parentCode" label="父样编号" width="115px" show-overflow-tooltip>
                  <!--<template slot-scope="scope">
                                        {{scope.row.doBlind ? '***':scope.row.parentCode}}
                                    </template>-->
                </el-table-column>
                <el-table-column property="subcontractorName" label="分包商" v-if="testEntryData.doSub">
                  <!--<template slot-scope="scope">
                                        {{scope.row.doBlind ? '***':scope.row.subcontractorName}}
                                    </template>-->
                </el-table-column>
              </el-table>
            </div>
            <div class="inlineblock" style="width:65%;margin-left:10px;" id="fenxixiangTable">
              <div id="resultTable">
                <el-table :data="resultTableData" style="width: 100%" size="mini" :height="sampleTableHeight"
                  highlight-current-row @selection-change="handleSelectionChange" key="2" v-if="reload" :cell-style="cellStyle">
                  <el-table-column label="项目名称" prop="resultMap.itemName" min-width="120px" show-overflow-tooltip>
                    <template slot-scope="scope">
                      {{scope.row.itemName != '' && scope.row.itemName != undefined ? scope.row.itemName:scope.row.analysisName}}
                    </template>
                  </el-table-column>
                  <template v-for="(col,index) in resultTableTitle">
                    <el-table-column :label="col.normName" :property="col.normCode" min-width="120px"
                      show-overflow-tooltip :key="Math.random()" v-if="col.doDisplay">
                      <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" placement="top-start" v-if="scope.row.valueStyle != null && scope.row.valueStyle != 0">
                          <div slot="content">{{scope.row.valueStyle == 1?"无样":(scope.row.valueStyle == 2?"干扰":(scope.row.valueStyle
                                                        == 3?"瓶坏":(scope.row.valueStyle == 4?"不测":"强制完成")))}}</div>
                          <el-button type="text" class="textButton">{{scope.row.resultMap[col.normCode].value}}</el-button>

                        </el-tooltip>
                        <span v-if="scope.row.valueStyle == null || scope.row.valueStyle == 0">{{scope.row.resultMap[col.normCode].value}}</span>
                      </template>
                    </el-table-column>
                  </template>
                </el-table>
              </div>
            </div>
          </div>
          <div v-if="!yuanshijiemian">
            <tongyong :testpanelData="testpanelData" :yuanshijiemian="yuanshijiemian"></tongyong>
          </div>
        </div>
      </div>

    </div>
    <user-record :addVisible.sync="equipCheckShow" :equipmentId="equipmentId" :testpanelData="testpanelData" :fromModel="'dataCheck'"></user-record>
    <zhuisu :addVisible.sync="zhuisuShow" :testpanelData="testpanelData" :checkOrReview="zscheckOrReview"></zhuisu>
    <check-detail :addVisible.sync="checkShow" @close="close" :sampleInfo="sampleInfo" :checkOrReview="checkOrReview"
      :testEntryData="testEntryData"></check-detail>
    <standar-series :addVisible.sync="standardseriesshow" :standarModel="'equipment'" :standardSeriesDetail="standardSeriesForm"></standar-series>
    <titrationResultCheck :addVisible.sync="titrationShow" :testEntryData="testEntryData" :titrationData.sync="titrationData"></titrationResultCheck>
    <verifyQc :addVisible.sync="verifyQcshow" :testpanelData="testpanelData"></verifyQc>
    <!--:standarModel="'equipment'"  随便传的值-->
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  const tongyong = () => import('./tongyong.vue');
  const userRecord = () => import('./equipCheck.vue');
  const zhuisu = () => import('./zhuisuCheck.vue');
  const checkDetail = () => import('./checkDetail.vue');
  const standarSeries = () => import(
    '../../../resourcesManage/instrumentmanamge/instrumentPage/detailDialogPage/standarSeries.vue');
  const titrationResultCheck = () => import('./titrationResultCheck.vue');
  const verifyQc = () => import('./verifyQc.vue');
  export default {
    data() {
      return {
        isBig: false,
        testEntryData: {}, //数据录入信息
        testEntryDetail: [], //检测单信息数据
        resultShow: false,
        equipCheckShow: false, //仪器使用前检查
        userRecordShow: false, //仪器使用记录
        resultTableData: [], //右边表数据
        equipmentId: null, //仪器id
        reload: true,

        resultTableTitle: [], //点击的样品要显示的标题
        resultTableTitleAll: [], //所有标题
        resultTableTitleSatndar: [], //qcType为undefined的表头
        allUnit: [], //所有的单位
        firstSampleId: null, //数据录入样品测试表中第一个样品的qcType
        currentRow: {}, //当前选中的样品行
        yuanshijiemian: true,
        zhuisuShow: false,
        checkShow: false,
        sampleInfo: [],
        checkOrReview: 'check',
        zscheckOrReview: 'check',
        isSuccess: false,
        loading1: true,
        standardSeriesForm: {
          code: '',
          configDate: null,
          temperature: '',
          humcodeity: '',
          doUse: false,
          checker: '',
          configMan: JSON.parse(sessionStorage.getItem('laboratoryAccountInfo')).loginid,
        },
        standardseriesshow: false, //标准曲线
        titrationShow: false,
        titrationData: {},
        titrationBtn: true, //滴定分析项按钮
        verifyQcshow: false,
        opinionList: [],
      }
    },
    computed: {
      ...mapState(['testBatchStatus', 'typeQcSelect', 'submitType']),
      sampleTableHeight() {
        return ((window.innerHeight - 310))
      },
    },
    components: {
      tongyong,
      zhuisu,
      userRecord,
      checkDetail,
      standarSeries,
      titrationResultCheck,
      verifyQc
    },
    props: ['addVisible', 'testpanelData','selectData'],
    mounted() {
      this.$store.dispatch('dogetDictionary')

    },
    watch: {
      testpanelData(val, oldVal) {
        console.log(val)
        if (val) {
          if(this.selectData.id != this.testpanelData.id){
            return;
          }
          this.isBig = false
          this.loading1 = false;
          // 初始化数据
          this.testEntryData = this.testpanelData;
          this.yuanshijiemian = false
          this.getOpinion(); //获取驳回意见
          this.getCalib();
          this.equipmentId = this.testEntryData.equipment; //仪器id
          this.testEntryDetail = [];
          // 组装检测单信息
          for (var i in this.testEntryData) {
            var obj = {};
            obj.code = this.testEntryData.code;
            obj.status = this.testEntryData.status;
            obj.statusName = this.formatterStatus(obj.status)
            obj.equipmentName = this.testEntryData.equipmentName;
            obj.assistEquipmentName = this.testEntryData.assistEquipmentName;
            obj.checkerName = this.testEntryData.checkerName;
            obj.togetherWithName = this.testEntryData.togetherWithName;
            obj.desc = this.testEntryData.desc
          }
          this.testEntryDetail.push(obj)
          // 调用表头数据函数
          this.readQcTypesInfo(); //质控不是标样，既qcType ！= undefined调用的接口
          this.readQcNorms(); //质控是标样  既qcType = undefined调用的接口
          this.readAllUnit();
          if (this.yuanshijiemian) {
            this.setCurrent(this.testEntryData.sampleBeans[0]) //设置检测单弹出，默认显示第一条样品的数据,并高亮显示
          }
          this.sampleInfo = this.testEntryData.sampleBeans;


          // this.compareQcPlan();
          // this.compareResResult()

        } else {
          console.log(111)
        }

      },
      yuanshijiemian(val) {
        if (val) {
          if( this.testEntryData.sampleBeans && this.testEntryData.sampleBeans.length>0){
            this.setCurrent(this.testEntryData.sampleBeans[0]) //设置检测单弹出，默认显示第一条样品的数据,并高亮显示
          }
        }
      }
    },
    methods: {
      isBigFun() {
        console.log(1111)
        this.isBig = !this.isBig
      },
      // 获取驳回意见
      getOpinion() {
        this.$http({
          method: 'post',
          apiUrl: '/detection/getBatchOpinions.htm',
          params: {
            batch: this.testEntryData.id
          },
          isJson: false
        }).then(res => {
          if (res.code == 0) {
            this.opinionList = res.data;
          }
        })
      },
      // 处理状态
      formatterStatus(cellValue) {
        return this.util.changeStatus({
          cellValue: cellValue,
          list: this.testBatchStatus
        })
      },
      // qc类型
      formatterQcType(row, column, cellValue, index) {
        return this.util.codeChangeName({
          cellValue: cellValue,
          list: this.typeQcSelect.itemList
        })
      },
      //默认选中第一条样品
      setCurrent(row) {
        this.$nextTick(() => {
          this.$refs.sampleTable.setCurrentRow(row);
          this.initTitle(this.testEntryData.sampleBeans[0].qcType) //设置检测单弹出，默认显示第一条样品的表头
          this.clickRow(this.testEntryData.sampleBeans[0])

        })
      },
      // 读取单位
      readAllUnit(item) {
        this.allUnit = [];
        this.$http({
          method: 'post',
          apiUrl: '/technology/readLabUnitList.htm',
          params: {
            ename: item
          },
          isJson: true
        }).then(res => {
          if (res.code == 0) {
            this.allUnit = res.data;
          }

        })
      },
      // 样品测试每一行点击事件
      sampleTableCurrentChange(row, event, column) {
        this.resultTableTitle = [];

        this.handleTitle(row.qcType); //渲染表头
        this.clickRow(row)
      },
      clickRow(row) {
        this.currentRow = row;
        this.resultTableData = [];

        for (var i in row.analysisBeans) { //遍历分析项，resultMap的值和标题对应起来之后赋值
          for (var k in this.resultTableTitle) {
            for (var j in row.analysisBeans[i].resultMap) {
              if (this.resultTableTitle[k].normCode == j) {
                row.analysisBeans[i].resultMap[this.resultTableTitle[k].normCode] = row.analysisBeans[i].resultMap[j];
              }
            }
          }
          this.resultTableData.push(row.analysisBeans[i])
        }
        // 该点击样品下的表是分析项和检测项目，检测项目在最下面，分析项在上面
        for (var i in row.itemBeans) {
          for (var k in this.resultTableTitle) { //遍历当前点击的样品的标题，根据标题的nomalCode加入resultMap
            for (var j in row.itemBeans[i].resultMap) { //接口返回数据不匹配，所以找不到对应得j
              if (this.resultTableTitle[k].normCode == j) {
                row.itemBeans[i].resultMap[this.resultTableTitle[k].normCode] = row.itemBeans[i].resultMap[j];
              }
            }
          }
          this.resultTableData.push(row.itemBeans[i])
        }
        this.reLoad();
      },

      // 检测项和分析项的空格只能输入数字和/，如果不是则设置为空
      handleClick(a, b) {
        if (isNaN(a[b]) && a[b] != '/') {
          this.$set(a, b, null)
          return false
        }
      },
      // 获取所有的表头数据
      readQcTypesInfo() {
        this.$http({
          method: 'post',
          apiUrl: '/qc/readQcTypesInfo.htm',
        }).then(res => {
          if (res.code == 0) {
            this.resultTableTitleAll = res.data;
          }
        })
      },
      // 是否重新加载
      reLoad() {
        this.reload = false;
        this.$nextTick(() => {
          this.reload = true;
        })
      },
      // 获取普通样的表头数据
      readQcNorms() {
        this.$http({
          method: 'post',
          apiUrl: '/qc/readQcNorms.htm',
          params: {
            genre: 1,
          },
          isJson: false
        }).then(res => {
          if (res.code === 0) {
            for (var i in res.data) {
              res.data[i].normCode = res.data[i].code
              res.data[i].normName = res.data[i].name
              res.data[i].doDisplay = true;
            }
            this.resultTableTitleSatndar = res.data;
          }

        })
      },
      // 根据qcType处理表头数据
      handleTitle(qctype) {
        if (qctype === undefined || qctype == "" || qctype == null) {
          this.resultTableTitle = this.resultTableTitleSatndar;
        } else {
          for (var i in this.resultTableTitleAll) {
            if (qctype == this.resultTableTitleAll[i].code) {
              this.resultTableTitle = this.resultTableTitleAll[i].typeNormBeans;
            }
          }
        }
      },
      // 进入页面显示第一行样品表头
      initTitle(qctype) {
        var tempArr = null;
        if (qctype === undefined || qctype == null || qctype == "") {
          this.$http({
            method: 'post',
            apiUrl: '/qc/readQcNorms.htm',
            params: {
              genre: 1,
            },
            isJson: false
          }).then(res => {
            if (res.code === 0) {
              for (var i in res.data) {
                res.data[i].normCode = res.data[i].code
                res.data[i].normName = res.data[i].name
                res.data[i].doDisplay = true
              }
              this.resultTableTitle = res.data;
            }
          })
        } else {
          this.$http({
            method: 'post',
            apiUrl: '/qc/readQcTypesInfo.htm',
          }).then(res => {
            if (res.code == 0) {
              for (var i in res.data) {
                if (qctype == res.data[i].code) {
                  this.resultTableTitle = res.data[i].typeNormBeans;
                }
              }
            }
          })
        }

      },
      // 仪器使用前检查项
      lookequipCheck() {
        if (this.testEntryData.equipment == null) {
          this.$notify({
            title: '警告',
            message: '找不到仪器',
            type: 'warning'
          })
        } else if (!this.testEntryData.hasEquipUse) {
          this.$notify({
            title: '警告',
            message: '无仪器使用记录',
            type: 'warning'
          })
        } else {
          this.equipCheckShow = true;
        }
      },
      // 分析项和检测项目选中的值
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 把检测项和分析项合并为一个数组tempArr
      concatArr(arr) {
        var tempArr = []
        for (var i in arr) {
          for (var j in arr[i].analysisBeans) {
            tempArr.unshift(arr[i].analysisBeans[j]);
          }
          for (var j in arr[i].itemBeans) {
            tempArr.push(arr[i].itemBeans[j]);
          }
        }

        return tempArr;
      },
      checkIsPass() {
        this.checkShow = true;
        // this.checkOrReview = "check";
      },
      // 追溯
      zhuisuDetail() {
        this.zhuisuShow = true;
        // this.zscheckOrReview = "check"
      },
      // 验证质控
      verifyQcData() {
        this.verifyQcshow = true;
      },
      // 判断单元格是否显示红色
      cellStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {

        for (var i in row.resultMap) {
          if (column.property == i) {
            // console.log(row.resultMap[i])
            if (row.resultMap[i].result == 2) {
              // console.log(i,column.property,111)
              return 'background:red'
            }
          }
        }

      },
      // 关闭弹框，清空数据
      close() {
        this.loading1 = true;
        this.$emit('update:addVisible', false);
        this.yuanshijiemian = true; //切换视图重置为原始值
        this.resultTableData = [];
        this.resultTableTitle = [];
        this.$emit('update:selectData', {});
        this.testEntryData = {}
      },
      // 标准曲线,查看最新
      standarLine() {
        this.$http({
          method: 'post',
          apiUrl: '/detection/readCriterion.htm',
          params: {
            batch: this.testEntryData.id
          },
          isJson: false,
        }).then(res => {
          if (res.code === 0) {
            if (res.data == undefined) {
              this.$notify({
                message: "本批次未应用标准曲线！",
                title: "警告",
                type: "warning"
              });
              return;
            }
            this.standardseriesshow = true;
            this.standardSeriesForm = res.data;
          }
        })
      },
      titrationResult() {
        this.titrationShow = true;
      },
      getCalib() {
        var data = {
          batch: this.testEntryData.id,
          detectability: this.testEntryData.detectability,
        }
        this.$http({
          method: 'post',
          apiUrl: '/detection/getCalib.htm',
          params: data,
          isJson: true,
        }).then(res => {
          if (res.code === 0) {
            if (res.data == undefined) {
              this.titrationBtn = false;
            } else {
              this.titrationData = res.data;
              this.titrationBtn = true;
            }

          }
        })
      },

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
<style>
  .isBigCon.twoStageWindow{
    width: calc(100% - 20px);
    position: fixed;
    top: 78px;
    height: calc(100% - 88px);
  }
  .iconDiv{
    position: absolute;
    top: 0;
    bottom: 0;
    left: -25px;
    margin: auto;
    font-size: 30px;
    width: 30px;
    height: 40px;
    z-index: 10;
  }
  .editpanelPop .radioGroup .el-radio {
    margin-left: 30px;
    display: block;
    height: 35px;
    line-height: 35px;
  }

  .editpanelPop .el-input-number.el-input-number--mini {
    width: 100%;
  }

  .editpanelPop .el-input-number.el-input-number--mini input {
    padding: 0 5px;
  }

  .editpanelPop .el-input-number.el-input-number--mini .el-input-number__increase,
  .editpanelPop .el-input-number.el-input-number--mini .el-input-number__decrease {
    display: none;
  }

  .editpanelPop .unitSelect .el-input__inner {
    padding: 0 !important;
    border: none;
    text-align: center;
  }

  .editpanelPop .unitSelect .el-input__suffix {
    display: none;
  }

  .textButton {
    color: #000;
  }
</style>
